<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <base href="./">
    
    <!-- Ionic CSS -->
    <link href="./ionic/css/chunk-ionic.f5c8e0e3.css" rel="stylesheet">
    <link href="./ionic/css/app.7b141fc5.css" rel="stylesheet">
    
    <style>
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        
        .app-container {
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            background: #3880ff;
            color: white;
            padding: 15px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
        }
        
        .content {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }
        
        .tabs {
            display: flex;
            background: #f8f9fa;
            border-top: 1px solid #dee2e6;
        }
        
        .tab {
            flex: 1;
            padding: 15px;
            text-align: center;
            background: none;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .tab.active {
            background: #3880ff;
            color: white;
        }
        
        .tab:hover {
            background: #e9ecef;
        }
        
        .tab.active:hover {
            background: #3171e0;
        }
        
        .page {
            display: none;
        }
        
        .page.active {
            display: block;
        }
        
        .book-card {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin: 10px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-left: 4px solid #3880ff;
        }
        
        .book-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .book-author {
            color: #666;
            margin-bottom: 10px;
        }
        
        .book-status {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .status-available {
            background: #d4edda;
            color: #155724;
        }
        
        .status-borrowed {
            background: #f8d7da;
            color: #721c24;
        }
        
        .btn {
            background: #3880ff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        
        .btn:hover {
            background: #3171e0;
        }
        
        .search-box {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 20px;
            font-size: 16px;
        }
        
        .welcome-card {
            background: linear-gradient(135deg, #3880ff, #5260ff);
            color: white;
            padding: 30px;
            border-radius: 12px;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 20px;
        }
        
        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #3880ff;
        }
        
        .stat-label {
            color: #666;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 头部 -->
        <div class="header">
            <span id="header-title">📚 图书管理系统</span>
        </div>
        
        <!-- 内容区域 -->
        <div class="content">
            <!-- 首页 -->
            <div id="home-page" class="page active">
                <div class="welcome-card">
                    <h2>欢迎使用图书管理系统</h2>
                    <p>HarmonyOS 版本 v1.0</p>
                </div>
                
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-number">1,234</div>
                        <div class="stat-label">总图书数</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">89</div>
                        <div class="stat-label">已借出</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">1,145</div>
                        <div class="stat-label">可借阅</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number">567</div>
                        <div class="stat-label">注册用户</div>
                    </div>
                </div>
            </div>
            
            <!-- 图书页面 -->
            <div id="book-page" class="page">
                <input type="text" class="search-box" placeholder="搜索图书..." id="book-search">
                
                <div class="book-card">
                    <div class="book-title">JavaScript 高级程序设计</div>
                    <div class="book-author">作者: Nicholas C. Zakas</div>
                    <span class="book-status status-available">可借阅</span>
                    <button class="btn" onclick="borrowBook('JavaScript 高级程序设计')">借阅</button>
                </div>
                
                <div class="book-card">
                    <div class="book-title">Vue.js 实战</div>
                    <div class="book-author">作者: 梁灏</div>
                    <span class="book-status status-borrowed">已借出</span>
                    <button class="btn" disabled>已借出</button>
                </div>
                
                <div class="book-card">
                    <div class="book-title">HarmonyOS 应用开发</div>
                    <div class="book-author">作者: 华为技术团队</div>
                    <span class="book-status status-available">可借阅</span>
                    <button class="btn" onclick="borrowBook('HarmonyOS 应用开发')">借阅</button>
                </div>
            </div>
            
            <!-- 借阅页面 -->
            <div id="borrow-page" class="page">
                <h3>我的借阅记录</h3>
                
                <div class="book-card">
                    <div class="book-title">Vue.js 实战</div>
                    <div class="book-author">借阅日期: 2024-01-15</div>
                    <div class="book-author">应还日期: 2024-02-15</div>
                    <button class="btn" onclick="returnBook('Vue.js 实战')">归还</button>
                </div>
                
                <div id="borrow-list"></div>
            </div>
            
            <!-- 我的页面 -->
            <div id="my-page" class="page">
                <div class="welcome-card">
                    <h3>👤 用户信息</h3>
                    <p>用户名: 张三</p>
                    <p>学号: 2021001</p>
                    <p>借阅权限: 正常</p>
                </div>
                
                <button class="btn" onclick="showMessage('个人设置')">个人设置</button>
                <button class="btn" onclick="showMessage('借阅历史')">借阅历史</button>
                <button class="btn" onclick="showMessage('意见反馈')">意见反馈</button>
            </div>
        </div>
        
        <!-- 底部标签栏 -->
        <div class="tabs">
            <button class="tab active" onclick="switchTab('home', '📚 图书管理系统')">
                🏠<br>首页
            </button>
            <button class="tab" onclick="switchTab('book', '📖 图书管理')">
                📖<br>图书
            </button>
            <button class="tab" onclick="switchTab('borrow', '📋 借阅记录')">
                📋<br>借阅
            </button>
            <button class="tab" onclick="switchTab('my', '👤 个人中心')">
                👤<br>我的
            </button>
        </div>
    </div>
    
    <script>
        console.log('📚 图书管理系统启动');
        
        // 切换标签页
        function switchTab(tabName, title) {
            // 隐藏所有页面
            const pages = document.querySelectorAll('.page');
            pages.forEach(page => page.classList.remove('active'));
            
            // 显示选中页面
            document.getElementById(tabName + '-page').classList.add('active');
            
            // 更新标题
            document.getElementById('header-title').textContent = title;
            
            // 更新标签状态
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => tab.classList.remove('active'));
            event.target.classList.add('active');
            
            console.log('切换到: ' + title);
        }
        
        // 借阅图书
        function borrowBook(bookName) {
            const borrowList = document.getElementById('borrow-list');
            const borrowCard = document.createElement('div');
            borrowCard.className = 'book-card';
            borrowCard.innerHTML = `
                <div class="book-title">${bookName}</div>
                <div class="book-author">借阅日期: ${new Date().toLocaleDateString()}</div>
                <div class="book-author">应还日期: ${new Date(Date.now() + 30*24*60*60*1000).toLocaleDateString()}</div>
                <button class="btn" onclick="returnBook('${bookName}')">归还</button>
            `;
            borrowList.appendChild(borrowCard);
            
            alert('借阅成功: ' + bookName);
            console.log('借阅图书: ' + bookName);
        }
        
        // 归还图书
        function returnBook(bookName) {
            alert('归还成功: ' + bookName);
            console.log('归还图书: ' + bookName);
        }
        
        // 显示消息
        function showMessage(message) {
            alert(message + ' 功能开发中...');
            console.log('功能: ' + message);
        }
        
        // 搜索功能
        document.getElementById('book-search').addEventListener('input', function(e) {
            console.log('搜索: ' + e.target.value);
        });
        
        console.log('✅ 图书管理系统加载完成');
    </script>
</body>
</html>